<script setup lang="ts">
import {IconColor, IconType} from "@/components/IconFont/type";
import IconFont from "@/components/IconFont/IconFont.vue";
import Chamber from "@/modal/Beehive";
import type {Reactive} from "vue";

interface iChamber {
  chamber: Reactive<Chamber>;
}

const props = defineProps<iChamber>();
const chamber = props.chamber
const growUp = () => {
  emits('emitGrowUp', chamber)
}
const emits = defineEmits(['emitGrowUp'])
</script>

<template>
  <div class="chamber-type col-12 h-100">
    <div v-for="(steps,index) in chamber.productRipen"
         @click="growUp"
         class="chamber-item">
      <div class="item-step">
        <icon-font
          :icon-type="IconType.NEST"
          :color="steps > chamber.selfStep? IconColor.FLOWER_PASSIVE:IconColor.BEEHIVE"
          font-size="xx-large">
        </icon-font>
      </div>
      <div class="award-content">
        <template v-if="steps === 1">
          <div class="award-icon">
            <icon-font
              :icon-type="IconType.SCORE"
              :number="chamber.showScore(steps)"
              :color="IconColor.SCORE"
              font-size="x-large">
            </icon-font>
          </div>
        </template>
        <template v-else-if="steps === 2">
          <div class="award-icon icon-desc">
            <icon-font
              :icon-type="IconType.PLANT"
              :color="IconColor.FERTILIZER"
              :is-desc="true"
              font-size="xx-large">
              <template #description>
                <span>任意</span>
              </template>
            </icon-font>
          </div>
        </template>
        <template v-else-if="steps === 3">
          <div class="award-icon">
            <icon-font
              :icon-type="IconType.FRUIT"
              :color="IconColor.IRRIGATE"
              font-size="x-large">
            </icon-font>
          </div>
          <div class="award-icon">
            <icon-font
              :icon-type="IconType.FRUIT"
              :color="IconColor.IRRIGATE"
              font-size="x-large">
            </icon-font>
          </div>
          <div class="award-icon">
            <icon-font
              :icon-type="IconType.FRUIT"
              :color="IconColor.IRRIGATE"
              font-size="x-large">
            </icon-font>
          </div>
        </template>
        <template v-else-if="steps === 4">
          <div class="award-icon icon-desc">
            <icon-font
              :icon-type="IconType.FARM"
              :color="IconColor.FERTILIZER"
              :is-desc="true"
              font-size="xx-large">
            </icon-font>
            <icon-font
              :icon-type="IconType.FARM"
              :color="IconColor.FERTILIZER"
              :is-desc="true"
              font-size="xx-large">
            </icon-font>
            <div style="width: 34px;">任意</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped>
.chamber-type {
  display: flex;
  flex-direction: column-reverse;
}

.chamber-item {
  position: relative;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.item-step {
  position: relative;
  top: -14px;
  left: -8px;
}

.award-content {
  position: absolute;
  left: -40px;
  top: calc(-50% + 3px);
}

.award-icon {
  position: absolute;
}

.award-icon.icon-desc {
  display: flex;
  justify-content: center;
  align-items: center;
  top: -6px;
}

.award-icon:nth-child(1) {
  left: 66px;
}

.award-icon:nth-child(2) {
  left: 86px;
}

.award-icon:nth-child(3) {
  left: 106px;
}

.award-desc {
  position: absolute;
  left: 64px;
  top: 6px;
  width: 120px;
}
</style>